<template>
  <div align=center>
    <h1>展示所有快递</h1>

    <table border="1px">
      <tr align=center>
        <td>快递订单号</td>
        <td>快递状态</td>
        <td>选择司机</td>
        <td>选择车辆</td>
        <td colspan="3">操作</td>
        <td>金额</td>
      </tr>
      <tr
        v-for='(i,index) in list'
        :key='index'
        align=center
      >
        <td>{{i.order_id}}</td>  
        <td>{{i.status}}</td>
        <td>
          <select v-model="i.driver_name">
            <option v-for='(a,index) in driver_list' :key='index' :value="i.driver_name" >{{a.name}}</option>
          </select>
        </td>
        <td>
          <select v-model="i.truck">
            <option
              v-for='(b,index) in car_list'
              :key='index'
              :value="i.truck"
            >{{b.plate_number}}</option>
          </select>
        </td>
        <td><button @click="start(i.id)">开始</button></td>
        <td><button @click="over(i.id)">结束</button></td>
        <td><button @click="price(i.id)">缴费</button></td>
        <td><input
            type="text"
            v-model="prices"
          ></td>

      </tr>
    </table>
  </div>
</template>

<script>
import { get_driver_list, get_truck_list, get_mail_list } from "@/components/axios_api/api.js"; // @符号指的是src路径
export default {
  data() {
    return {
      prices: "",

      driver_status: "",
      car_status: "",

      name: "",
      to_place: "",
      from_place: "",
      sender: "",
      receiver: "",
      receiver_phone: "",
      sender_phone: "",
      driver_id: "",
      truck_id: "",

      list: [],
      car_list: [],
      driver_list: [],
      all_list: [],

      all_price: "",
    };
  },
  methods: {
    //   获取快递单
    get_mail() {
        get_mail_list().then((res) => {
          if (res.code == 200) {
            this.list = res.data
          } else {
            alert('创建订单失败')
          }
        })
      
    },
    //   获取空闲司机
    get_driver() {
      get_driver_list().then((res) => {
          if (res.code == 200) {
            this.driver_list = res.data
            console.log('111111111', this.driver_list)
          } else {
            alert('创建订单失败')
          }
        })
    },
    //   获取空闲汽车
    get_car() {
      get_truck_list().then((res) => {
          if (res.code == 200) {
            this.car_list = res.data
          } else {
            alert('创建订单失败')
          }
        })
    },
    
  },
  mounted() {
    this.get_mail(), this.get_driver(), this.get_car()
  },
};
</script>

<style>
</style>